import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {Select,
  Input,
  Button,
  Modal,
  Popover,
  Tree,
  Table,
  Cascader,
  Upload,
} from "antd";
const { Option } = Select;
const {TreeNode} = Tree;
const { Search,TextArea } = Input;



const style={
  formItem:{
    marginBottom:10,
    alignItems:"center"
  }
};


// 商铺列表管理
@inject(["store"])
@observer
class Shops extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.shops = props.store.storeShops;
  }
  
  componentDidMount(){
    this.store.navigation({page:"Shops"});
    if(!this.data || !this.data.length){this.shops.init();}
  }

  // loading
  @computed get loading(){return this.store.loading;}
  // 高度
  @computed get height(){return this.store.height;}
  // 根目录
  @computed get rootPath(){return this.store.rootPath;}

 
  // 树形所选节点
  @computed get selectedKeys(){return toJS(this.shops.selectedKeys);}
  // 分页数据
  @computed get data() {return toJS(this.shops.paging.data);}
  // 查询
  @computed get where() {return this.shops.where;}
  @computed get tid() {return this.shops.tid;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.shops.paging.nowPage),total:Number(this.shops.paging.maxNum),pageSize:Number(this.shops.paging.num)};
  }
  // 表单数据
  @computed get form(){return this.shops.form;}

  
  // 树形
  renderTreeNodes = (data) => {
    return data.map((item) => {
      const title = (
        <Popover 
          placement="right" 
          title={item.title} 
          content={
            <div>
              <p>id:{item.id}</p>
              <p>upid:{item.upid}</p>
              <p>tit:{item.title}</p>
              <p>cont:{item.cont}</p>
            </div>
          } 
          trigger="contextMenu">
          <span>{item.title}</span>
        </Popover>
      );
      if (item.children) {
        return (
          <TreeNode title={title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} title={title} />;
    });
  }

  render(){   
    const columns = [
      {title: "编号",dataIndex: "id",width:"10%"},
      {title: "商铺名称",dataIndex: "tit",width:"20%"},
      {title: "商铺地址",dataIndex: "address",width:"30%"},
      {title: "商铺图片",dataIndex: "image",width:"10%",render:text=>{return text?<img alt="图片" style={{width:40,height:40}} src={text} />:<FileImageOutlined />;}},
      {
        title:"创建时间",
        dataIndex:"createtime",
        width:" 15%",
        render:(text)=>{
          let tm = new Date(Number(text)*1000);
          return <span>{tm.getFullYear()}-{tm.getMonth()+1}-{tm.getDate()}</span>;
        }
      },
      {
        width:"15%",
        title: "相关操作",
        key: "form",
        render: (text ,record)=> {
          return(
            <View>
              <Button
                onClick={()=>this.props.history.push(`${this.rootPath}/shops/edit/${record.id}`)}
                shape="circle"
                title="编辑"
                icon={<EditOutlined />}
              />
              <Button
                onClick={()=>{
                  Modal.confirm({
                    title: "确认放入回收站",
                    content: "是否放入回收站内？",
                    onOk:()=>this.shops.delete(record.id),
                    onCancel() {},
                  });
                }}
                icon={<DeleteOutlined />}
                style={{margin:"0 10px"}}
                type="danger"
                shape="circle"
                title="回收站"
              />
            </View>
          );
        } 
      },
    ];
    const form  = this.form;
    const image = form.data?(/\.(png|jpg|jpeg|gif)$/.test(form.data.image)?<img alt="图片" style={{width:25,height:25,marginRight:10}} src={form.data.image} />:null):null;
    return (
      <View style={{overflow:"hidden",height:this.height-50,width:"100%"}}>
        <div style={{flex:1,overflow:"hidden",height:this.height-50,padding:"0 5px"}}>
          <View 
            style={{
              borderBottom:"1px #eee solid",
              height:50,
              alignItems:"center",
              background:"#f2f2f2"
            }}>
            <Select
              defaultValue="0"
              onChange={v=>this.shops.set("where-field",v)}
              style={{width:"100px",margin:"0 5px"}}
              >
              <Option value="0">选择类型</Option>
              <Option value="tit">商铺名称</Option>
              <Option value="id">商铺编号</Option>
            </Select>
            <Select
              defaultValue="0"
              onChange={v=>this.shops.set("where-condition",v)}
              style={{width:100,margin:"0 5px"}}
              >
              <Option value="0">选择条件</Option>
              <Option value="=">等于查询</Option>
              <Option value="like">模糊查询</Option>
            </Select>
            <Search
              placeholder="输入查询内容"
              onSearch={value => this.shops.search(value)}
              style={{ width: 250 }}
              value={this.where.value}
              onChange={(e)=>this.shops.set("where-value",e.target.value)}
              enterButton
            />
            <Button onClick={()=>this.shops.init()}  style={{margin:"0 5px 0 20px"}}>所有商铺</Button>
            <Link to={`${this.rootPath}/shops/edit`}>
              <Button
                icon={<PlusOutlined />} 
                type="primary"
                style={{margin:"0 5px"}}
                >
                新建商铺
              </Button>
            </Link>
          </View>
          <Table
            scroll={{y:this.height-180,x:"100%"}}
            loading={this.loading}
            rowKey={record => record.id}
            columns={columns}
            dataSource={this.data}
            pagination={this.pagination}
            onChange={pagination=>this.shops.page(pagination.current)}
          />
        </div>
      </View>
    );
  }
}

export default Shops;